<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
            <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/common1.js"></script>
<script type="text/javascript" src="js/jBox-master/Source/plugins/Notice/jBox.Notice.min.js"></script>
<link rel="stylesheet" href="js/jBox-master/Source/plugins/Notice/jBox.Notice.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/NoticeFancy.css">
</head>
<body>
   <!-- 添加游戏类别 -->
      <p class="bg-success" style="width:150px;height:30px;font-size:20px;text-align:center; margin-left:100px;">添加游戏类别</p>
      <form class="form-horizontal" role="form">
      <div class="form-group" >
        <label class="col-sm-2 control-label ">游戏类别名称：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入类别名称" id="gameClass">
         </div>
      </div>
      <button type="button" class="btn btn-primary" onclick="addGameClass()"  style="margin-left:150px;">提交</button>
      </form>
   <!-- 添加游戏   -->
      <p class="bg-success" style="width:150px;height:30px;font-size:20px;text-align:center; margin-left:100px;margin-top:20px;">添加游戏</p>
      <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">选择游戏类别：</label>
        <div class="col-xs-2">
            <select class="form-control" id="gameClasses">
              <option value="">请选择</option>
              <option v-for="gc in gclass" :value="gc.gcId">{{gc.gcName}}</option>
            </select>
         </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label ">游戏名称：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入游戏名称" id="game">
         </div>
      </div>
      <button type="button" class="btn btn-primary" onclick="addGame()" style="margin-left:150px;">提交</button>
      </form>
      
      <!-- 添加游戏分区   -->
      <p class="bg-success" style="width:150px;height:30px;font-size:20px;text-align:center; margin-left:100px;margin-top:20px;">添加游戏分区</p>
      <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">选择游戏类别：</label>
        <div class="col-xs-2">
            <select class="form-control" id="gameClasses1" onchange="getGame()">
              <option value="">请选择</option>
              <option v-for="gc in gclass" :value="gc.gcId">{{gc.gcName}}</option>
            </select>
         </div>
      </div>
      <div class="form-group ">
        <label class="col-sm-2 control-label">选择游戏名称：</label>
        <div class="col-xs-2">
            <select class="form-control" id="games">
              <option value="">请选择</option>
              <div v-if="games!=''">
              <option v-for="game in games" :value="game.gameId">{{game.gameName}}</option>
              </div>
            </select>
         </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label ">游戏分区名称：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入游戏分区名称" id="gameZone">
         </div>
      </div>
      <button type="button" class="btn btn-primary" onclick="addGameZone()" style="margin-left:150px;">提交</button>
      </form>
      
      <!-- 添加商品分类   -->
      <p class="bg-success" style="width:150px;height:30px;font-size:20px;text-align:center; margin-left:100px;margin-top:20px;">添加商品分类</p>
      <form class="form-horizontal" role="form">
      <div class="form-group ">
        <label class="col-sm-2 control-label">游戏类别：</label>
        <div class="col-xs-2">
            <select class="form-control" id="gameClasses2" onchange="getGame1()">
              <option value="">请选择</option>
              
              <option v-for="gc in gclass" :value="gc.gcId">{{gc.gcName}}</option>
            </select>
         </div>
      </div>
      
      <div class="form-group ">
        <label class="col-sm-2 control-label">游戏名称：</label>
        <div class="col-xs-2">
            <select class="form-control" id="games1" onchange="getGameZone()">
              <option value="">请选择</option>
              <div v-if="games!=''">
              <option v-for="game in games" :value="game.gameId">{{game.gameName}}</option>
              </div>
            </select>
         </div>
      </div>
      
      <div class="form-group">
        <label class="col-sm-2 control-label">游戏分区：</label>
        <div class="col-xs-2">
            <select class="form-control" id="gameZones" onchange="queryGame_GameZoneId()">
            <!-- 针对两种情况设计了两个请选择下拉框 -->
              <option value="无分区" v-if="gzone==''">请选择</option>
              <div v-if="gzone!=''and gzone!=null">
              <option value="" v-if="gzone!=''">请选择</option>
              <option v-for="gz in gzone" :value="gz.gzId">{{gz.gzName}}</option>
              </div>
            </select>								
         </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label ">商品类别名称：  </label>
        <div class="col-xs-3">
            <input type="text" class="form-control"  placeholder="请输入商品类别名称" id="GoodsClass">
         </div>
      </div>
      <button type="button" class="btn btn-primary" onclick="addGoodsClass()" style="margin-left:150px;">提交</button>
      </form>
      
</body>
<script type="text/javascript">
var gameClass=new Vue({
	el:'#gameClasses',
	data:{
		gclass:'',
	}
});
var gameClass1=new Vue({
	el:'#gameClasses1',
	data:{
		gclass:'',
	}
});
var game=new Vue({
	el:'#games',
	data:{
		games:''
	}
});

var gameClass2=new Vue({
	el:'#gameClasses2',
	data:{
		gclass:'',
	}
});
var game1=new Vue({
	el:'#games1',
	data:{
		games:''
	}
});
var gameZone=new Vue({
	el:'#gameZones',
	data:{
		gzone:'',
	}
});
//声明一个游戏表_游戏分区表id变量
var game_gameZoneId='';

//添加游戏分类
function addGameClass(){
	var gcName=$("#gameClass").val();
	if(gcName==null || gcName==""){
		new jBox('Notice', {
			animation: 'flip',
		    content: '不能为空',
		    color: 'red'
		});
		return;
	}
	$.ajax({
		url:'addGameClass.se',
		data:{gcName:gcName},
		type:'post',
		dataType:'json',
		success:function(result){
			if(result){
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加成功',
				    color: 'blue'
				});
				queryGameClass();
			}else{
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加失败',
				    color: 'red'
				});
			}
		}
	});
}
//获取游戏分类
function queryGameClass(){
	$.ajax({
		url:'queryGameClass.do',
		type:'post',
		dataType:'json',
		success:function(result){
			gameClass.gclass=result;
			gameClass1.gclass=result;
			gameClass2.gclass=result;
		}
	});
}
//页面一加载就获取游戏分类
$(function(){
	queryGameClass();
})
//添加游戏
function addGame(){
	var gcId=$("#gameClasses").val();//获取Select选择的Value 
	var gameName=$("#game").val();
	if(gcId==null || gcId==""){
		new jBox('Notice', {
			animation: 'flip',
		    content: '游戏类别不能为空',
		    color: 'red'
		});
		return;
	}
	if(gameName==null || gameName==""){
		new jBox('Notice', {
			animation: 'flip',
		    content: '游戏名字不能为空',
		    color: 'red'
		});
		return;
	}
	$.ajax({
		url:'addGame.se',
		data:{gc_Id:gcId,gameName:gameName},
		type:'post',
		dataType:'json',
		success:function(result){
			if(result){
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加成功',
				    color: 'blue'
				});
			}else{
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加失败',
				    color: 'red'
				});
			}
		}
	});
}
//获取游戏表
function getGame(){
	var gcId=$("#gameClasses1").val();//获取Select选择的Value 
	if(gcId==null || gcId==''){  //如果选择的是‘请选择’，则把data设为空字符串，并且结束方法，不执行ajax
		game.games='';
		return;
	}else{
		 $("#games").get(0).selectedIndex=0;//设置Select索引值为0的项选中
	}
	$.ajax({
		url:'queryGames.do',
		data:{gcId:gcId},
		type:'post',
		dataType:'json',
		success:function(result){
			console.log(result);
			game.games=result;
		}
		
	})
};
//添加游戏分区
function addGameZone(){
	var gid=$("#games").val();
	var gZName=$("#gameZone").val();
	if(gid==null || gid==""){
		new jBox('Notice', {
			animation: 'flip',
		    content: '游戏选项不能为空',
		    color: 'red'
		});
		return;
	}
	$.ajax({
		url:'addGameZone.se',
		data:{game_id:gid,gZName:gZName},
		type:'post',
		dataType:'json',
		success:function(result){
			if(result){
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加成功',
				    color: 'blue'
				});
			}else{
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加失败',
				    color: 'red'
				});
			}
		}
	});
}

//获取游戏表(添加商品分类功能)
function getGame1(){
	var text=$("#gameClasses2").find("option:selected").text();//获取Select选择的Text 
	var gcId=$("#gameClasses2").val();//获取Select选择的Value 
	if(gcId==null || gcId==''){  //如果选择的是‘请选择’，则把data设为空字符串，并且结束方法，不执行ajax
		game1.games='';
	    gameZone.gzone='';
		return;
	}else{
		 $("#games1").get(0).selectedIndex=0;//设置Select索引值为0的项选中
		 gameZone.gzone='';
	}
	$.ajax({
		url:'queryGames.do',
		data:{gcId:gcId},
		type:'post',
		dataType:'json',
		success:function(result){
			console.log(result);
			game1.games=result;
		}
		
	})
};
//获取游戏分区表(添加商品分类功能)
function getGameZone(){
	var gId=$("#games1").val();  //获取Select选择的Value
	if(gId==null || gId==''){  //如果选择的是‘请选择’，则把data设为空字符串，并且结束方法，不执行ajax
		gameZone.gzone='';
		return;
	}else{
		 $("#gameZone").get(0).selectedIndex=0;//设置Select索引值为0的项选中
	}
	$.ajax({
		async:false,
		url:'queryGameZone.do',
		data:{gId:gId},
		type:'post',
		dataType:'json',
		success:function(result){
			console.log(result);
			gameZone.gzone=result;
			
			//如果值为空那么直接获取游戏表_游戏分区id
			if(result==null || result==''){
				$.ajax({
					async:false,         //加上此属性保证多个ajax同步按顺序执行，
					url:'queryGame_GameZone.do',
					data:{game_id:gId},
					type:'post',
					dataType:'json',
					success:function(result){
						game_gameZoneId=result;
					}
				});
			}
		}
		
	});
};
//获取游戏表_分区表id
function queryGame_GameZoneId(){
	var gzId=$("#gameZones").val();  //获取Select选择的Value
	var gId=$("#games1").val();  //获取Select选择的Value
	if(gzId==null || gzId==""){
		return;
	}
	$.ajax({
		async:false,
		url:'queryGame_GameZone.do',
		data:{game_id:gId,gzId:gzId},
		type:'post',
		dataType:'json',
		success:function(result){
			game_gameZoneId=result;
			console.log(result);
		}
	});
}
//添加商品分类
function addGoodsClass(){
	var ggzId=game_gameZoneId;
	var gcName=$("#GoodsClass").val();
	if(ggzId==null || ggzId==""){
		new jBox('Notice', {
			animation: 'flip',
		    content: '选项不能为空',
		    color: 'red'
		});
		return;
	}
	if(gcName==null || gcName==""){
		new jBox('Notice', {
			animation: 'flip',
		    content: '商品分类名称不能为空',
		    color: 'red'
		});
		return;
	}
	$.ajax({
		url:'addGoodsClass.se',
		data:{ggzId:ggzId,gcName:gcName},
		type:'post',
		dataType:'json',
		success:function(result){
			if(result){
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加成功',
				    color: 'blue'
				});
			}else{
				new jBox('Notice', {
					animation: 'flip',
				    content: '添加失败',
				    color: 'red'
				});
			}
		}
	});
}
</script>
</html>